<template>
  <el-dialog :visible.sync="visible" title="学员续费" @open="openDialog" @close="closeDialog">
    <el-form ref="rechargeForm" :model="rechargeForm" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="studentName" :readonly="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="续费金额（元）" prop="amount" style="text-align: left">
            <el-input-number v-model="rechargeForm.amount" :min="0" controls-position="right"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="支付方式" prop="chargeType">
            <el-select v-model="rechargeForm.chargeType">
              <el-option v-for="type in chargeTypes" :key="type.value" :value="type.value" :label="type.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="rechargeForm.chargeType !== 1" :label="payOrderNoLabel">
            <el-input v-model="rechargeForm.payOrderNo"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="优惠方式">
            <el-select v-model="rechargeForm.promotionMethod">
              <el-option v-for="type in promotionMethods" :key="type.value" :value="type.value" :label="type.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="rechargeForm.promotionMethod !== 0" label="折扣率">
            <el-input-number
              v-model="rechargeForm.discount"
              :min="0"
              :max="1.0"
              :step="0.1"
              :precision="2"
              controls-position="right" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="经办老师" prop="teacherId">
            <el-select v-model="rechargeForm.teacherId" clearable placeholder="选择经办老师">
              <el-option v-for="item in teachers" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注" style="width: 100%">
            <el-input
              :autosize="{ minRows: 4 }"
              v-model="rechargeForm.remark"
              type="textarea"
              maxlength="255"
              show-word-limit
              placeholder="续费备注"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click.native="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click.native="submitRecharge">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRecharge } from '@/api/student'
import { getTeacherListOptions } from '@/api/teacher'

export default {
  props: {
    merchantStudentId: {
      type: Number,
      required: true
    },
    studentName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      chargeTypes: this.$store.getters.chargeTypes,
      promotionMethods: this.$store.getters.promotionMethods,
      // 续费界面
      rechargeForm: {
        merchantStudentId: '',
        amount: 0,
        chargeType: 1,
        orderNo: '',
        promotionMethod: 0,
        discount: '1.0',
        teacherId: '',
        remark: ''
      },
      rules: {
        amount: [{ required: true, message: '请输入缴费金额', trigger: 'blur' }],
        chargeType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
        teacherId: [{ required: true, message: '请选择经办老师', trigger: 'change' }]
      },
      loading: false,
      teachers: [],
      teacher: ''
    }
  },
  computed: {
    payOrderNoLabel() {
      if (this.rechargeForm.chargeType === 4) {
        return '银行流水号'
      } else {
        return '支付单号'
      }
    }
  },
  created() {
    
  },
  methods: {
    openDialog() {
      console.log('open recharge')
      this.getTeacherListOptions()
    },
    closeDialog() {
      this.visible = false
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.visible = false
      this.$refs['rechargeForm'].resetFields()
    },
    // 提交续费订单
    submitRecharge() {
      this.$refs['rechargeForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          const para = Object.assign({}, this.rechargeForm)
          para.merchantStudentId = this.merchantStudentId
          addRecharge(para).then((res) => {
            this.resetForm()
            this.$message({
              message: '续费成功，等待主管审核',
              type: 'success'
            })
            this.visible = false
            this.loading = false
            // this.$parent.$parent.init()
          }).catch(err => {
            this.loading = false
            this.$notify({
              title: '续费单添加失败',
              message: err.msg,
              type: 'error'
            })
          })
        }
      })
    },
    getTeacherListOptions() {
      getTeacherListOptions().then(res => {
        this.teachers = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
